<link rel="stylesheet" href="__PUBLIC__/lib/ionRangeSliderDemo/css/normalize.css" />
<link rel="stylesheet" href="__PUBLIC__/lib/ionRangeSliderDemo/css/ion.rangeSlider.css" />
<link rel="stylesheet" href="__PUBLIC__/lib/ionRangeSliderDemo/css/ion.rangeSlider.skinFlat.css" />
<style>
    html{

    }
    .tabSX {
        position: fixed;
        top: 0;
        width: 100%;
        height: 86%;
        z-index: 200;
    }

    .tabSX .lbTab {
        height: 100%;
    }

    .float {
        position: fixed;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .6);
        z-index: 50;
    }

    section, .whitebg {
        background-color: #fff;
    }

    /* 筛选栏 */
    .lbTab {
        height: 44px;
        position: relative;
    }

    .lbTab ul {
        height: 44px;
        border-bottom: 1px solid #f4f4f4;
    }

    .lbTab li {
        padding: 11px 0;
        width: 25%;
        float: left;
    }

    .lbTab li i {
        font-style: normal
    }

    .lbTab li a {
        display: block;
        border-right: 1px solid #f4f4f4;
        height: 22px;
        line-height: 22px;
        font-size: 14px;
        text-align: center;
        color: #565c67;
        padding: 0 6px;
    }

    .lbTab li:last-child a {
        border-right: none;
    }

    .lbTab li.active a {
        color: #ff6666;
    }

    .lbTab li span {
        position: relative;
        display: inline-block;
        line-height: 21px;
        max-width: 75%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-right: 13px;
    }

    .lbTab li span:after {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 4px;
        border-color: #cccfd8 transparent transparent transparent;
        right: 0;
        top: 50%;
        margin-top: -2px;
    }

    .lbTab li.active span:after {
        border-color: transparent transparent #f66 transparent;
        margin-top: -6px;
    }

    .lbTab .cont {
        position: absolute;
        width: 100%;
        top: 44px;
        left: 0;
        bottom: 0;
        background-color: #fff;
        z-index: 6;
        overflow-y: auto;
        overflow-x: hidden;;
    }

    .lbTab section {

        border-right: 1px solid #f4f4f4;
        float: left;
        width: 100%;
    }

    .lbTab .flexbox .cont dl {
        height: 100%;
    }

    .lbTab .cont dd {
        padding: 0 16px;
        border-bottom: 1px solid #f4f4f4;
        height: 44px;
        line-height: 43px;
        font-size: 14px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        background-color: #fff;
        color: #3c3f46;
    }

    .lbTab .cont dd.active {
        position: relative;
        background-color: #f2f5f8;
    }

    .lbTab .cont dd.active:before {
        content: '';
        position: absolute;
        width: 2px;
        height: 20px;
        background: #ff6666;
        left: 0;
        top: 50%;
        margin-top: -10px;
    }

    .lbTab .cont dd a {
        display: block;
        padding: 0 16px;
        margin: 0 -16px;
        color: #3c3f46;
    }

    .lbTab .cont .btn {
        height: 49px;
        position: absolute;
        left: 0;
        width: 100%;
        bottom: 0;
    }

    .lbTab .cont .btn a {
        display: block;
        width: 100%;
        height: 49px;
        line-height: 49px;
        font-size: 16px;
        color: #fff;
        background-color: #ff6666;
        text-align: center;
    }

    .lbTab .cont .btnIn {
        padding: 20px 0 30px;
        text-align: center;
    }

    .lbTab .cont .btnIn a {
        display: inline-block;
        line-height: 25px;
        border: 1px solid #ff6666;
        font-size: 14px;
        color: #ff6666;
        min-width: 74px;
        text-align: center;
        padding: 0 10px;
        border-radius: 1px;
    }

    .lbTab .cont .btnIn2 {
        padding-bottom: 30px;
        text-align: center;
    }

    .lbTab .cont .btnIn2 a {
        display: inline-block;
        width: 100%;
        width: 130px;
        height: 36px;
        line-height: 36px;
        font-size: 16px;
        color: #ffffff;
        background-color: #ff6666;
        text-align: center;
        border-radius: 2px;
    }

    .lbTab .checkBox {
        padding: 20px 20px;
    }

</style>

<div>
<div id="mask" class="float" style="display: none;"></div>
<section id="sift">
<div class="lbTab">
<!--刷选-->
<ul class="flexbox">
    <li name="whereChioce ide">
        <a><i><span>
            <if condition="$city neq '' ">
                {$city['city']}
            <else />
                位置
            </if>
            </span>
        </i></a>
    </li>
    <li name="riceChioce ide">
        <a><i><span>
        <if condition="($minpr eq 0) and ($maxpr eq 120000) ">
            价格
            <else />
            {$minpr}-{$maxpr}
        </if>
        </span>
        </i></a>
    </li>
    <li name="characterChioce ide">
        <a><i><span>
             <if condition="$wylx neq '' ">
                 {$wylx['TITLE']}
             <else />
                 物业
             </if>
        </span>
        </i></a>
    </li>
    <li name="allChioce ide">
        <a><i><span>
        <if condition="$sort neq '' ">
            {$sort['TITLE']}
            <else />
            排序
        </if>
        </span></i></a>
    </li>
</ul>
<!--/刷选-->
<!--位置-->
<div id="wapxfsy_D02_01" class="whereChioce cont flexbox" style="display:none;">
    <section id="whereChioce">
        <dl>
            <dd  <if condition="'' eq $city "> class="active" </if> >
            <a href="{:U('Home/newhouse',array('city'=>'','wylx'=>$wylx['ID'],'sort'=>$sort['ID'],'minpr'=>$minpr,'maxpr'=>$maxpr))}">不限</a>
            </dd>

            <foreach name="DataCity" item="CityItem">
                <dd  <if condition="$CityItem['threeid'] eq $city['threeid'] "> class="active" </if> >
                <a href="{:U('Home/newhouse',array('city'=>$CityItem['threeid'],'wylx'=>$wylx['ID'],'sort'=>$sort['ID'],'minpr'=>$minpr,'maxpr'=>$maxpr))}">{$CityItem['city']}</a>
                </dd>
            </foreach>
        </dl>
    </section>

    <!-- 地铁站点end -->

</div>
<!--价格-->
<div id="wapxfsy_D02_02" class="priceChioce cont" style="display:none;">
    <section id="priceChioce">
        <dl>

            <foreach name="Think.config.HOUSE_PRICE" item="housePrice">
                <dd class="noarr">
                    <a data-minpr = "{$housePrice['MINVALUE']}" data-maxpr = "{$housePrice['MAXVALUE']}"  href="{:U('Home/newhouse',array('city'=>$city['threeid'],'wylx'=>$wylx['ID'],'sort'=>$sort['ID'],'minpr'=>$housePrice['MINVALUE'],'maxpr'=>$housePrice['MAXVALUE']))}" >{$housePrice['TITLE']}</a></dd>
            </foreach>

            <div class="checkBox">
                <input type="text" id="range" value="" name="range" />
            </div>
            <div class="btnIn2"><a id="btnPriceSure" href="javascript:void(0)" class="chooseBtn">确认</a></div>
        </dl>
    </section>
</div>
<!--物业类型-->
<div id="wapxfsy_D02_03" class="characterChioce cont flexbox" style="display:none;">
    <section id="characterChioce">
        <dl>

            <foreach name="Think.config.HOUSE_WYLX" item="houseWylx">
                <dd <if condition="$key eq $wylx['ID'] "> class="active" </if> ><a  href="{:U('Home/newhouse',array('city'=>$city['threeid'],'wylx'=>$key,'sort'=>$sort['ID'],'minpr'=>$minpr,'maxpr'=>$maxpr))}" >{$houseWylx['TITLE']}</a></dd>

            </foreach>
        </dl>
    </section>
</div>
<!--/ 物业类型 -->
<!--排序-->
<div id="wapxfsy_D02_04" class="allChioce cont haveSec"  style="display:none;">
    <section>
        <dl>

            <foreach name="Think.config.HOUSE_SORT" item="houseSort">
                <dd <if condition="$sort['ID'] eq $houseSort['ID'] "> class="active" </if> ><a  href="{:U('Home/newhouse',array('city'=>$city['threeid'],'wylx'=>$wylx['ID'],'sort'=>$houseSort['ID'],'minpr'=>$minpr,'maxpr'=>$maxpr))}" >{$houseSort['TITLE']}</a></dd>

            </foreach>
        </dl>

    </section>
</div>

</div>
</section>
</div>
<script>

    $(function () {
        var intSelSort = 0;
        var intSelWhere = 0;
        var intSelRice = 0;
        var intSelAll = 0
        var intShade = 0

        //价格默认选择对应的按钮
        $("#priceChioce .noarr").each(function(i){

            if(minpr== $(this).find("a").data('minpr') && maxpr ==$(this).find("a").data('maxpr')){
                $(this).addClass("active");
                return false;
            }

        });

        //价格查询确认
        $("#btnPriceSure").on('click',function(){
            // Saving it's instance to var
            var slider = $("#range").data("ionRangeSlider");

            location.href = "/index.php/?m=Home&a=newhouse&city="+city+"&wylx="+wylx+'&sort'+sort+"&minpr=" + slider.old_from +"&maxpr=" + slider.old_to;
        });

        //遮罩点击后屏蔽
        $("#mask").on('click', function () {
            changeSel(5);
            $("#sift").removeClass("tabSX");
            $("#mask").hide();
            $("html").css('overflow','auto');
        })

        //初始化价格拖动条
        $("#range").ionRangeSlider({
            hide_min_max: true,
            min: 0,
            max: 12100,
            from: minpr,
            to: maxpr,
            type: 'double',
            step: 100,
            prefix: "",
            grid: false,
            min_prefix:'不限',
            max_postfix:'不限'
        });

        //
        $("li[name='whereChioce ide']").on('click', function () {

         $("#whereChioce").focus();
                if(intSelWhere == 0){
                   // showShade();
                    changeSel(0);
                    intSelWhere = 1;
                }else{
                    changeSel(0);
                }
        });

        $("li[name='riceChioce ide']").on('click', function () {

                if(intSelRice == 0){
//                    showShade();
                    changeSel(1);
                    intSelRice = 1;
                } else {
                    changeSel(1);
                }

        });

        $("li[name='characterChioce ide']").on('click', function () {
                if(intSelSort == 0){
//                    showShade();
                    changeSel(2);
                    intSelSort = 1;
                } else {
                    changeSel(2);
                }
        });

        $("li[name='allChioce ide']").on('click', function () {
            if(intSelSort == 0 && intSelRice == 0 && intSelWhere == 0 ){
                if(intSelAll == 0){
//                    showShade();
                    changeSel(3);
                    intSelAll = 1;
                } else {
                    changeSel(3);
                }
            }else{
                changeSel(3);
            }
        });


        function changeSel(intClick){
            $("#sift").addClass("tabSX");
            $("#mask").show();

            $("html").css('overflow','hidden');

            $ (window).unbind ('scroll');

            $("#wapxfsy_D02_01").hide();
            $("li[name='whereChioce ide']").removeClass("active");

            $("#wapxfsy_D02_02").hide();
            $("li[name='riceChioce ide']").removeClass("active");

            $("#wapxfsy_D02_03").hide();
            $("li[name='characterChioce ide']").removeClass("active");

            $("#wapxfsy_D02_04").hide();
            $("li[name='allChioce ide']").removeClass("active");

            switch ( intClick ) {
                case  0 :
                        $("#wapxfsy_D02_01").show();
                        $("li[name='whereChioce ide']").addClass("active");
                    break;
                case  1 :
                        $("#wapxfsy_D02_02").show();
                        $("li[name='riceChioce ide']").addClass("active");
                    break;
                case  2 :
                        $("#wapxfsy_D02_03").show();
                        $("li[name='characterChioce ide']").addClass("active");
                    break;
                case 3 :
                        $("#wapxfsy_D02_04").show();
                        $("li[name='allChioce ide']").addClass("active");
                      break;
            }
        }


    });
</script>
<script src="__PUBLIC__/lib/ionRangeSliderDemo/js/ion.rangeSlider.js"></script>
